<template>
<div>
<div >
  <p v-for="i in this.list" :key="i.path">
    <router-link :to="{name: i.name}">{{i.name}}</router-link>
  </p>
</div>

<el-row>
  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
<!--      <img v-bind:src="'static/images/case_1_' + o.id + '.jpg'" class="image">-->
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
<br>
<el-row>
  <el-col :span="8" v-for="(o, index) in this.imgList" :key="o" >
    <el-card :body-style="{ padding: '0px' }">
<!--      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
    <img v-bind:src="'static/images/case_1_' + o + '.jpg'" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

<el-row>
  <el-col :span="8" v-for="(o, index) in this.imgList" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }">
<!--      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
    <img v-bind:src="'static/images/case_1_' + o + '.jpg'" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

<div v-for="i in this.imgList" :key="i">
  <img v-bind:src="'static/images/case_1_' + i + '.jpg'" >
</div>
<br>
<img v-bind:src="'static/images/case_1_' + this.o.id + '.jpg'">


</div>

</template>

<script>
const data = {
  items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' },
        { id: 3, text: '项目3' }
      ],
  list: [
        { path: "#/form 有问题无法跳转，待处理", name: '/form' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ],
  currentDate: new Date(),
  imgList:[1,2,3,4],
  o: {
   id: 1
  }
}
export default {
  name: "Card",
   data() {
      return data
  },
}
</script>

<style scoped>
 .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 90%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

</style>
